<template>
  <border-box>
    <dv-card>
      <template #header>
        <dv-title-1
          :backgroundImageUrl="require('@/assets/threeGovernment/titleBj.png')"
        >
          四个千亿目标
        </dv-title-1>
      </template>
      <div class="dv-card content">
        <dv-card
          class="mb-5"
          :card-bg="require('@/assets/4dmb/bj.png')"
          style="height: 210px"
          sub
        >
          <template #header>
            <dv-title2>木雕家具</dv-title2>
          </template>
          <div style="margin-left: 15px">
            <Image
              :src="require('@/assets/components/654333/a10.png')"
              width="400"
            ></Image>
            <radar
              eleId="bar6"
              width="400"
              height="90"
              :background="false"
              :source="bar5"
              :color="['#00A1FF', '#5CE0E2']"
              :round="false"
              :area="true"
            ></radar>
          </div>
        </dv-card>
        <dv-card
          class="mb-5"
          :card-bg="require('@/assets/4dmb/bj.png')"
          style="height: 210px"
          sub
        >
          <template #header>
            <dv-title2>影视文旅</dv-title2>
          </template>
          <div style="margin-left: 15px">
            <Image
              :src="require('@/assets/components/654333/a10.png')"
              width="400"
            ></Image>
            <radar
              eleId="bar7"
              width="400"
              height="90"
              :background="false"
              :source="bar5"
              :color="['#00A1FF', '#5CE0E2']"
              :round="false"
              :area="true"
            ></radar>
          </div>
        </dv-card>
        <dv-card
          class="mb-5"
          :card-bg="require('@/assets/4dmb/bj.png')"
          style="height: 210px"
          sub
        >
          <template #header>
            <dv-title2>建筑业建筑工业</dv-title2>
          </template>
          <div style="margin-left: 15px">
            <Image
              :src="require('@/assets/components/654333/a10.png')"
              width="400"
            ></Image>
            <radar
              eleId="bar8"
              width="400"
              height="90"
              :background="false"
              :source="bar5"
              :color="['#00A1FF', '#5CE0E2']"
              :round="false"
              :area="true"
            ></radar>
          </div>
        </dv-card>
        <dv-card
          class="mb-5"
          :card-bg="require('@/assets/4dmb/bj.png')"
          style="height: 210px"
          sub
        >
          <template #header>
            <dv-title2>规上工业</dv-title2>
          </template>
          <div style="margin-left: 15px">
            <Image
              :src="require('@/assets/components/654333/a10.png')"
              width="400"
            ></Image>
            <radar
              eleId="bar9"
              width="400"
              height="90"
              :background="false"
              :source="bar5"
              :color="['#00A1FF', '#5CE0E2']"
              :round="false"
              :area="true"
            ></radar>
          </div>
        </dv-card>
      </div>
    </dv-card>
  </border-box>
</template>

<script>
import BorderBox from "@/components/BorderBox1";
import DvCard from "@/components/DvCard";
import DvTitle1 from "@/components/DvTitle1";
import DvTitle2 from "@/components/DvTitle2";
import Radar from "@/components/charts/Bar";
import Image from "@/components/Image";
export default {
  name: "FourTarget",
  components: { DvTitle2, DvTitle1, DvCard, BorderBox, Radar, Image },
  data() {
    return {
      bar5: {
        name: ["20以下", "21-30", "31-40", "41-50", "51-60", "60以上"],
        series: [
          { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "男" },
          { data: [23, 42, 51, 25, 32, 38], type: "line", name: "女" },
        ],
      },
    };
  },
};
</script>

<style scoped></style>
